<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>负责人管理</span>
    </div>
    <el-row type="flex" justify="center">
      <el-col :md="16" :sm="24">
        <div v-for="(data,index) in advPositionData" class="bottom-line">

          <v-form
            :form-title="advPositionTitle"
            :form-data="data"
            label-width="120px"
          />
          <el-row type="flex" justify="end">
            <!--<el-button size="mini" @click="removePosition(data,index)">移除</el-button>-->
            <el-button type="primary" size="mini" @click="modifyPosition(data,index)">确定修改</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>

  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'
  import searchForm from '@/views/components/searchForm'

  export default {
    name: 'Home',
    components: { searchForm },
    data() {
      return {
        isEdit: true,

        advPositionTitle: [
          {
            cn: '标签中文名称',
            en: 'label_name',
            tips: '标签类型为选择框时,请在标签选项值中输入数据,多个数据用回车隔开',
          },
          {
            cn: '标签类型',
            en: 'label_type',
            type: 'select',
            tips: '标签类型为选择框时,请在标签选项值中输入数据,多个数据用回车隔开',
            list: [
              // {
              //   label: '数字输入框',
              //   value: '1'
              // },
              // {
              //   label: '文字输入框',
              //   value: '2'
              // },
              {
                label: '选择框',
                value: 'select'
              },
              // {
              //   label: '日期选择',
              //   value: '4'
              // }
            ]
          },
          {
            cn: '标签选项值',
            en: 'label_option',
            type: 'textarea'
          }
        ],
        advPositionData: [
          {
            label_name: '',
            label_type: '',
            label_options: ''
          }
        ]
      }
    },
    activated() {
      this.getAdvPositionData()

    },
    methods: {
      getAdvPositionData() {

        this.$get('action/GroupLabels/tree')
          .then(res => {
            if (!res.retcode) {

            this.advPositionData = res.data.data
            }
          })
      },

      // 修改公众号自定义广告位置
      modifyPosition(val) {
        const data = val
        this.$get('action/GroupLabels/save', data)
          .then(res => {
            if (!res.retcode) {
              this.getAdvPositionData()
              this.$message({
                  message:res.msg,
                  type:'success'
              })
            }
          })
      },

    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      accountTitle() {
        if (this.isEdit) {
          return this.editTitle
        } else {
          return this.addTitle
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .top-nav {
    padding: 0 55px 15px 0;
  }

  .line {
    text-align: center;
  }

  .grid-content {
    /*font-size: 20px;*/
    cursor: pointer;
    color: #45d1e1;

    .color {
      /*font-size: 20px;*/
      color: #45d1e1;
      font-weight: 600;
    }
  }

  .table-menu {
    /*padding-left: 30px;*/
    padding-bottom: 15px;
  }

  .block {
    padding-top: 15px;
  }
</style>

